<script lang="ts" setup>
import { type ExposeParam, MdEditor } from 'md-editor-v3'
import { uploadFileAPI } from '@/api/file'
import { formatFileUrl } from '@/utils/fileUtils'

type Props = {
  /* 是否预览 */
  preview?: boolean
}

const inputValue = defineModel({ type: String })

const editRef = ref<ExposeParam>()
const props = defineProps<Props>()

// 上传图片
const onUploadImg = async (files, callback) => {
  await Promise.all(
    files.map((file) => {
      return new Promise((rev, rej) => {
        const form = new FormData()
        form.append('file', file)
        // 上传文件
        uploadFileAPI(form).then((res) => {
          callback([{ url: formatFileUrl(res.data.fileUrl), title: res.data.fileName }])
        })
      })
    })
  )
}

const themeStore = useThemeStoreHook()
</script>

<template>
  <MdEditor
    ref="editRef"
    v-model="inputValue"
    :theme="themeStore.themeType as any"
    @onUploadImg="onUploadImg"
  />
</template>

<style scoped></style>
